<%@ include file="/common/taglibs.jsp" %>
<c:set var="categoryUrl"><spring:url value="/images/folder.png"/></c:set>
<c:set var="bookUrl"><spring:url value="/images/file.png"/></c:set>
<c:set var="hasBookName"><spring:message code='categories.categoriesTree.hasBookName'/></c:set>
<c:set var="defaultOpenNodeIds" value="${sf:getAllSubCategoriesId(rootCategory, null, null)}"/>
<c:set var="defaultNeededLocales" value="${sf:getStringFromCollection(neededLocales, null, null)}"/>
<head>
	<link rel="stylesheet" type="text/css" href="<spring:url value="/styles/themes/default/style.css"/>"/>
	<script type="text/javascript" src="<spring:url value='/scripts/jquery.jstree.js'/>"></script>
	<script type="text/javascript" src="<spring:url value='/scripts/jquery.cookie.js'/>"></script>
	<script type="text/javascript" src="<spring:url value='/scripts/jquery.hotkeys.js'/>"></script>
	<script type="text/javascript">
	var LOCALES = [${defaultNeededLocales}];
	$(function () {
		$("#categoriesTree")
			.jstree({ 
				// List of active plugins
				"plugins" : [ 
					"themes","html_data", "types", "ui", "dnd", "languages" 
				],
				//multi-languages setting
				"languages" : LOCALES,
				
				// Using types - most of the time this is an overkill
				// read the docs carefully to decide whether you need types
				"types" : {
					// I set both options to -2, as I do not need depth and children count checking
					// Those two checks may slow jstree a lot, so use only when needed
					"max_depth" : -2,
					"max_children" : -2,
					// I want only `drive` nodes to be root nodes 
					// This will prevent moving or creating any other type as a root node
					"valid_children" : [ "rootCategoryType" ],
					"types" : {
						// The default type
						"bookType" : {
							// I want this type to have no children (so only leaf nodes)
							// In my case - those are files
							"valid_children" : "none",
							// If we specify an icon for the default type it WILL OVERRIDE the theme icons
							"icon" : {
								"image" : "${bookUrl}"
							}
						},
						// The `folder` type
						"categoryType" : {
							// can have files and other folders inside of it, but NOT `drive` nodes
							"valid_children" : [ "categoryType" ],
							"icon" : {
								"image" : "${categoryUrl}"
							}
						},
						// The `drive` nodes 
						"rootCategoryType" : {
							// can have files and folders inside, but NOT other `drive` nodes
							"valid_children" : [ "categoryType"],
							"icon" : {
								"image" : "${categoryUrl}"
							},
							// those prevent the functions with the same name to be used on `drive` nodes
							// internally the `before` event is used
							"start_drag" : false,
							"move_node" : false,
							"delete_node" : false,
							"remove" : false
						}
					}
				},
				// the core plugin - not many options here
				"core" : { 
					// just open those two nodes up
					// as this is an AJAX enabled tree, both will be downloaded from the server
					"initially_open" : [${defaultOpenNodeIds}]
				}
			});

			$("a[id^='show4']").click(function () {
				$("#categoriesTree").jstree("set_lang", $(this).text());
			});
		});
	</script>
</head>
<table>
	<tr>
		<td>
			<c:forEach var="neededLocale" items="${neededLocales}" varStatus="localeStatus">
				<c:choose>
					<c:when test="localeStatus.first"><a href="#" id="show4${neededLocale}">${neededLocale}</a></c:when>
					<c:otherwise> | <a href="#" id="show4${neededLocale}">${neededLocale}</a></c:otherwise>
				</c:choose>
			</c:forEach>
		</td>
	</tr>
	<tr>
		<td><st:categoriesTree root="${rootCategory}" id="categoriesTree" hasBookName="${hasBookName}"/></td>
	</tr>
</table>
